<template lang="">
  <div>
    <button :disabled="b2 <= -1" @click="moveLeft">&lt;</button>
    <span v-show="showPreMore">...</span>
    <button  v-show="b2>0" @click="curPage = b2">{{b2}}</button>
    <button  v-show="b1>0" @click="curpage = b1">{{b1}}</button>
    <button class="pager-btn">{{curPage}}</button>
    <button v-show="a1 <= total" @click="curPage = a1">{{a1}}</button>
    <button v-show="a2 <= total" @click="curPage = a2">{{a2}}</button>
    <span v-show="showNextMore">...</span>
    <button :disabled="a2>=total" @click="moveRight">&gt;</button>
    <span>跳转到：</span><input v-model="jump" size="2"/>
    <button @click="curPage = parseInt(jump)">goto</button>
   
</div>
</template>
<script>
export default {
  props:{
    curPage:{
      type:Number,
      default:1
    },//当前页
    total:{
      type:Number,
      default:10
    }
  },
  data() {
    return {
      showPreMore:false,//是否要显示当前页前面的三个点
      showNextMore:false,//是否要显示当前后面的三个点
      jump:''//跳转页码
    }
  },
  methods: {
    moveLeft(){
        this.curPage -= 1;
        if(this.curPage < 1){
            this.curPage = 1;
        }
    },
    moveRight(){
        this.curPage += 1;
        if(this.curPage > this.total){
            this.curPage = this.total;
        }
    }
  },
  computed:{
    b1:function(){
      return this.curPage-1;
    },
    b2:function(){
        let b2 = this.curPage -2;
        return b2;
    },
    a1:function(){
        return this.curPage+1;
    },
    a2:function(){
        let a2 = this.curPage + 2;
        return a2;
    }
  },
  watch:{
    curPage:function(newVal){
        console.log("当前页是："+newVal);
        this.$emit("pageChange",newVal);
    },
    b2:function(newVal){
      if(newVal>=3){
        this.showPreMore = true;
      }else{
        this.showPreMore = false;
      }
    },
    a2:function(newVal){
      if(newVal< this.total){
        this.showNextMore = true;
      }else{
        this.showNextMore = false;
      }
    }
  }
}
</script>
<style lang="css">
  .show{
      display: block;
  }
  .hide{
      display: none;
  }
  .pager-btn{
            background-color: rgb(153, 216, 241);
        }
</style>